<template lang="pug">
.view.cp-manage-train.fix-flex-pos
  el-tabs.mt-tabs(v-model="activeName")
    el-tab-pane(v-for="(pane, index) in paneList", :label="pane.label", :name="pane.name", :key="index")
  .mt-main.fix-flex-pos
    keep-alive
      component(:is="comObj[activeName]")
</template>

<script>
import TrainAgency from './trainagency';
import CourseMan from './courseman';
import CourseSet from './courseset';
import Credential from './credential';

export default {
  name: 'mantrain',
  data() {
    return {
      activeName: 'trainagency',
      paneList: [
        { label: '培训机构', name: 'trainagency' },
        { label: '培训课程', name: 'courseman' },
        { label: '课程组合', name: 'courseset' },
        { label: '证书', name: 'credential' }
      ],
      comObj: {
        trainagency: TrainAgency,
        courseman: CourseMan,
        courseset: CourseSet,
        credential: Credential
      }
    };
  },
  computed: {
  },
  methods: {

  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {

  },
  mounted () {

  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$TABHEIGHT: 42px
.cp-manage-train
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .mt-tabs
    position: relative
    height: $TABHEIGHT
    border-top: 2px solid #eee
    .el-tabs__header
      padding-left: 20px
      background-color: #fff
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: #fff
  .mt-main
    top: $TABHEIGHT
</style>

